import React, {JSX} from 'react';
import {View, Image, StyleSheet, TouchableOpacity} from 'react-native';
import {BasicText} from '../text';
import {Item} from '../../screen/HistoryScreen/data';
import {ScreenWidth} from '../../config/devices';
import { normalize } from '../../utils/adapter';

type Props = {} & Item;

function Vertical({cover, title, subtitle, episodesNum}: Props): JSX.Element {
  return (
    <TouchableOpacity style={[styles.cover_view]}>
      <Image source={cover} style={styles.cover_view} />
      <View style={styles.title_view}>
        <BasicText color="#333333" fontSize={normalize(14)} fontWeight={'bold'}>
          {title}
        </BasicText>
      </View>
      <View style={styles.title_view}>
        <BasicText color="#999999" fontSize={normalize(14)}>
          {subtitle}·{episodesNum}
        </BasicText>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  cover_view: {
    width:normalize(ScreenWidth / 3 - 20),
  },
  title_view: {
    marginTop:normalize(10),
  },
});

export default React.memo(Vertical);
